import React, { Component } from 'react'
import Context from '../../utils/context'
import Banner from "../banner"
import Alert1 from "../alert1"

export default class alert extends Component {
    static contextType = Context;
    state = {
        isShow1: false,
        n: 0
    }
    render() {
        let { con, closeAlert } = this.context
        let { isShow1 } = this.state
        return (
            <div className='alert'>
                <div className='con'>
                    <h1 onClick={closeAlert}>关闭</h1>
                    <Banner list={con.list} />
                    <h2>{con.name}</h2>
                    <div><button onClick={this.addCar}>加入购物车</button>:{this.state.n}</div>
                    {isShow1 ? <Context.Provider value={{ ...this }}><Alert1 /></Context.Provider> : null}
                </div>
            </div>
        )
    }
    addCar = () => {
        this.setState({ isShow1: true })
        
    }
    closeAlert1 = () => {
        this.setState({}, () => {
            setTimeout(() => {
                this.setState({ isShow1: false })
            }, 500)
        })
    }
    setN = () => {
        this.setState({ n: this.state.n + 1 })
    }
}
